<template>
  <div>
    <!--  首部小导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/mine' }">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>绑定邮箱</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <!--  步骤条-->
    <el-steps :active="active" finish-status="success">
      <el-step title="验证身份"></el-step>
      <el-step title="绑定邮箱"></el-step>
      <el-step title="绑定成功"></el-step>
    </el-steps>
    <el-divider></el-divider>
    <!--  第一步验证原邮箱  -->
    <div v-if="active===0" style="margin: 30px auto">
      <p v-if="this.user.email===null||this.user.email===''">
        请输入密码：<input v-model="password" type="text" style="height: 20px"/>
      </p>
      <div v-if="this.user.email!==''&&this.user.email!==null">
        <p>已绑定邮箱 <span v-text="oldEmail.substr(0,4)"></span>
          xxxxxx<span v-text="oldEmail.substr(oldEmail.indexOf('@'))"></span>
          若想换绑请获取免费验证码</p>
        <p>验证码: <input type="text" v-model="verificationCode" style="height: 20px">
          <el-button style="margin-left: 30px" size="small" @click="getVerificationCode">免费获取验证码</el-button>
        </p>
      </div>
    </div>
    <!--  第二步 绑定新邮箱  -->
    <div v-if="active===1" style="margin: 30px auto">
      <p>请输入新邮箱：<input type="phone" v-model="email" style="height: 20px"/></p>
    </div>
    <p v-if="active===0||active===1">
      <el-button style="background-color: chocolate;color: #f0f8ff" @click="next">下一步</el-button>
    </p>
    <!--  第三步 修改完成  -->
    <div v-if="active===3">
      <img src="../../../assets/success.png" alt="" style="width: 200px;margin:5% 0 0 37%">
      <h2 style="margin: 5% 0 0 38%">新邮箱号绑定成功</h2>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import {mapState} from "vuex";

export default {
  name: "BindEmailView",
  data() {
    return {
      oldEmail: '0000000000@xx.com',
      active: 0,
      email: '',
      password: '',
      verificationCode: ''
    };
  },
  computed: {
    ...mapState(["user", "userId"])
  },
  mounted() {
    if (typeof (this.user.email) == "undefined"||this.user.email==='') {
      console.log("/user/email/" + this.userId)
      axios.get("/user/email/" + this.userId).then(r => {
        if (typeof r.data.data!=="undefined"){
          this.user.email = r.data.data
          this.oldEmail = this.user.email
        }
      }).catch(e=>console.log(e))
    }
    if (this.user.email!==null&&this.user.email!=='')
      this.oldEmail = this.user.email
  },
  methods: {
    next() {
      //第一步 验证身份
      if (this.active === 0) {
        //原邮箱号为空 密码验证
        if (this.user.email === '') {
          axios.get("/user/password/" + this.userId + "/" + this.password).then(r => {
            if (r.data.state === 20000) {
              this.active++
            }
          }).catch(e => console.log(e))
          //原邮箱号不为空 验证码
        } else {
          axios.get("/user/checkVerificationCode/" + this.user.email + "/" + this.verificationCode).then(r => {
            if (r.data.state === 20000) {
              this.active++
            }
          }).catch(e => console.log(e))
        }
      }
      //第二步 绑定新邮箱号
      if (this.active === 1) {
        console.log("提交的email:")
        console.log(this.email)
        this.user.email = this.email
        console.log("this.user.email = " + this.user.email)
        axios.post("/user/email/" + this.userId, this.email).then(r => {
          if (r.data.state === 20000) {
            this.active += 2
          }
        }).catch(e => console.log(e))
      }
    },
    //获取验证码
    getVerificationCode() {
      axios.get("/user/getVerificationCode/" + this.user.email).then(r => {
        console.log(r.data.data)
      }).catch(e => console.log(e))
    },
    checkIsPhone(email) {
      let reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!reg.test(email)) {
        console.log(email)
        this.$message.warning("请输入正确的邮箱号")
      }
    }
  }
}
</script>

<style scoped>
p {
  text-align: center;
  margin-top: 30px;
}
</style>